<template>
  <div class="newCourseDesign">
    <el-breadcrumb separator="/" class="breadcrumb-bottom">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>课程管理</el-breadcrumb-item>
      <el-breadcrumb-item>新增课程设计</el-breadcrumb-item>
    </el-breadcrumb>
    <el-form ref="form" :model="form" label-width="100px" class="content">
      <el-form-item label="课设名称">
        <el-input v-model="form.courseDesignName" placeholder="请输入专业"></el-input>
      </el-form-item>
      <el-form-item label="专业">
        <el-input v-model="form.majorID" placeholder="请输入专业"></el-input>
      </el-form-item>
      <el-form-item label="年级">
        <el-input v-model="form.teachingSchedule" placeholder="请输入年级"></el-input>
      </el-form-item>
      <el-form-item label="学年">
        <el-input v-model="form.academicYear" placeholder="请输入学年"></el-input>
      </el-form-item>
      <el-form-item label="学期">
        <el-select v-model="form.term" placeholder="请输入学期" class="max-width">
          <el-option label="1" value="1"></el-option>
          <el-option label="2" value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="开始时间">
        <el-input v-model="form.startTime" placeholder="请输入开始时间"></el-input>
      </el-form-item>
      <el-form-item label="结束时间">
        <el-input v-model="form.endTime" placeholder="请输入结束时间"></el-input>
      </el-form-item>
      <el-form-item label="负责老师">
        <el-input v-model="form.teacherName" placeholder="请输入老师名称"></el-input>
      </el-form-item>
      <el-form-item label="所带班级">
        <el-input v-model="form.classID" placeholder="请输入班级名称"></el-input>
      </el-form-item>
      <el-form-item label="课设安排">
        <el-upload
          class="upload-demo"
          ref="upload1"
          action="http://192.168.1.108:8080/TeachingMIS/courseDesign/uploadCourseArrangeInfo"
          name="courseArrangeInfoName"
          :auto-upload="false"
          on-success="setCAI">
          <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
          <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload1">上传到服务器</el-button>
        </el-upload>
      </el-form-item>
      <el-form-item label="课设内容">
        <el-upload
          class="upload-demo"
          ref="upload2"
          action="http://192.168.1.108:8080/TeachingMIS/courseDesign/uploadCourseDesignInfo"
          name="courseDesignInfoName"
          :auto-upload="false"
          on-success="setCDI">
          <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
          <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload2">上传到服务器</el-button>
        </el-upload>
      </el-form-item>
      <el-form-item label="备注">
        <el-input type="textarea" :rows="6" v-model="form.remark1"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">立即创建</el-button>
        <el-button>取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  export default {
    name: 'newCourseDesign',
    data () {
      return {
        form: {
          majorID: '01',
          majorName: '',
          grade: '',
          academicYear: '',
          term: '',
          courseName: '',
          courseID: '01',
          startTime: '2016-1-1',
          endTime: '2016-4-4',
          teacherName: '',
          className: '',
          remark1: '03'
        },
        url: 'http://192.168.1.108:8080/TeachingMIS/courseDesign/insertDesignInfo'
      }
    },
    created: {},
    methods: {
      onSubmit() {
        var _this = this;
        //var formData = JSON.stringify(this.form); //表单数据 {emulateJSON:true}
        this.$http.post(this.url, this.form, {emulateJSON: true}).then(function (res) {
          if (res.json().state == "success") {
            setTimeout(function () {
              console.log("success");
              _this.$notify({
                title: '成功',
                message: '新增课程设计成功',
                type: 'success'
              });
            }, 2000);
          }

        }).catch(function () {
          console.log("服务器异常！");
        });
      },
      submitUpload1() {
        this.$refs.upload1.submit();
      },
      submitUpload2() {
        this.$refs.upload2.submit();
      },
      setCAI(response, file, fileList){
        /*for(var key in response.body){
         this.form[key]=response.body[key]
         }*/
        console.log(response)
      },
      setCDI(response, file, fileList){

      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .max-width {
    width: 100% !important;
  }
</style>
